<template>
	<view class="itemBox"  @click="clickItem" >
		<view class="content">
			{{itemConetnt}}
		</view>
		<uni-popup ref="shiciPop" type="center" background-color="#fff" :mask-click="false">
			<view class="popBox" :style="{background: `url(${imageURL})`,backgroundSize:'cover'}">
				<view class="content-box">
					{{itemConetnt}}
				</view>
			</view>
			<view class="btnBox">
				<view class="copyBtn btn" @click="clickCopy()">
					<image src="~@/static/icons/copy.png" mode="" class="copy-img"></image>
				</view>
				<view class="closeBtn btn" @click.stop="clickClose(e)">
					<image src="~@/static/icons/close.png" mode="" class="close-img"></image>
				</view>
				<view class="gotoBtn btn" @click="clickGoto()">
					<image src="~@/static/icons/goto.png" mode="" class="goto-img"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {showSuccess} from '@/config/request.js'
	export default{
		props:{
			itemConetnt:{
				type:String,
				default:"aaaa",
				required:true
			},
			shiciUrl:{
				type:String,
				default:"aaaa",
				required:true
			}
		},
		onLoad() {
		},
		data() {
			return {
				imageURL: 'https://i.niupic.com/images/2021/08/01/9pIL.png'
			};
		},
		methods:{
			clickItem(){
				this.$refs.shiciPop.open('center')
			},
			clickClose(e){
				this.$refs.shiciPop.close()
			},
			clickCopy(){
				uni.setClipboardData({
				    data: this.itemConetnt,
				    success: function () {
				        showSuccess('复制成功!')
				    }
				});
			},
			clickGoto(){
				console.log("跳转到另一个页面")
				let	url=this.shiciUrl
				// url = encodeURIComponent(url)
				uni.navigateTo({
					url: '/pages/webpage/index?redirectUrl='+url,
					success: res => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				});

			}
		}
	}
</script>

<style lang="less" scoped>
	.itemBox{
		height: 80px;
		margin: 20px;
		box-sizing: border-box;
		padding: 5px;
		background: rgba(236, 236, 236, 0.1);
		-webkit-box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.2); 
		box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.2);
		border-radius:5px;
		.content{
			// 控制只显示三行文本,多余省略
			display:-webkit-box;
			-webkit-line-clamp:3;
			-webkit-box-orient:vertical;
			overflow:hidden;
		}
		.popBox{
			    height: 300px;
			    background: #fce2b1;
			    text-align: center;
			    width: 250px;
			    font-size: 17px;
			    line-height: 30px;
			    padding: 10px 10px 60px;
				font-family: KaiTi;
				font-weight: bold;
				.content-box{
					width: 100%;
					height: 100%;
					overflow-y: scroll;
				}
		}
		.btnBox{
			height: 50px;
			width: 100%;
			position: absolute;
			bottom: 0px;
			display: flex;
			justify-content: space-between;
		}
		.btn{
			    height: 50px;
			    width: 50px;
		}
	}
</style>
